<template>
	<view class='box'>
		<mSearch  @search="search($event,0)" :textTag="textTag"></mSearch>
		<view class="content">
			
			<!-- 历史记录 -->
			<view class="history" v-if="tagList.length != 0">
				<view class="tit">搜索历史</view>
				<view class="">
					<uni-tag :text="item" v-for="(item,i) in tagList" :key="i" @click="clickTag(item)"/>
				</view>
				<view class="clearTit" @click="clearTag">
					<uni-icons type="trash" size="17"></uni-icons>
					清空搜索历史
				</view>
			</view>
			
			<!-- 搜索列表 -->
			<view class="listContent" v-if="list.length != 0">
				<view class="tit">相关商品</view>
				
				<view class="whiteCard" v-for="item in list" :key="item.id" @click="goPage(item)">
					<view class="mark" :style="{background:item.type==1?'#ff7800':'#3cc51f'}">{{getStatus(item.type)}}</view>
					<view class="image">
						<image :src="imgapi + item.avatar" mode="aspectFill"></image>
						<text v-if="item.peopleCount">{{item.peopleCount}}人团</text>
					</view>
					<view class="right">
						<view class="textOver title">{{item.title}}</view>
						<view class="sale center" >已售{{item.sale}}</view>
						
						<view class="leftPrice" v-if="item.discountPrice">
							￥{{item.discountPrice}} 
							<text>￥{{item.originalPrice}} </text>
						</view>
						<view class="leftPrice" v-else>
							￥{{item.originalPrice}} 
						</view>
						<view class="address textOver">{{item.address}}</view>
					</view>
					
				</view>
				
				<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import mSearch from '@/pageA/uni_modules/mehaotian-search/mehaotian-search.vue';
	export default {
		components: {
			mSearch
		},
		data() {
			return {
				// 下拉加载
				ifBottomRefresh: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 10,
					search: "",
				},
				type: 2,
				
				// 搜索
				val0: '',
				tag: [],
				tagList: [],
				placeholder: '动态占位内容',
				textTag:{
					text:''
				},
				
				// 搜索内容
				list:[],
				imgapi:'',
				url:"",
			}
		},
		watch:{
			tag(newVal){
				this.tagList = newVal.slice(0,10)
			}
		},
		onShow() {
			this.tag = uni.getStorageSync("search2") || []
		},
		onLoad(e) {
			console.log(e);
			this.params.type = e.type
		},
		//触底加载状态
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.getlist()
			}
		},
		methods: {
			getStatus(type){
				switch(type){
					case 1:
						return "团购";
					case 2:
						return "商家";
					case 3:
						return "平台";
				}	
			},
			goPage(item){
				/* 
				 item.type  1 团购  2 商家商品  3 平台商品
				 type跳转传参  1 商家  2 平台
				 */
				if(this.type == 2){
					if(item.type == 1){
						this.url = "./bulkDetail?id="+item.id
					}else if(item.type == 2){
						this.url = `../growVegetables/shopDetails?id=${item.id}&type=${1}`
					}else{
						this.url = `../growVegetables/shopDetails?id=${item.id}&type=${2}`
					}
				}
				console.log(this.url);
				uni.navigateTo({
					url:this.url
				})
			},
			// 去除"\"
			removeLine(str){
				return str.replace(/\\/g,"")
			},
			// 标签颜色
			getType(index) {
				switch (index) {
					case 0:
						return "success"
					case 1:
						return "default"
					case 2:
						return "warning"
					case 3:
						return "error"
				}
			},
			// 清除tag
			clearTag(){
				uni.removeStorageSync("search2")
				this.tag = []
			},
			// 点击tag
			clickTag(e){
				console.log(e);
				this.textTag.text = e
				
			},
			clearList(){
				this.list = []
				this.params = {
					pageNo: 1,
					pageSize: 10
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			// 搜索
			search(e, val) {
				if(!e){
					uni.showToast({
						title:"输入框不能为空",
						icon:"none"
					})
					return
				}
				this.clearList()
				
				console.log(e, val);
				this['val' + val] = e;
				this.params.search = e
				
				if(this.tag.indexOf(e) == -1){
					this.tag.unshift(e)
					uni.setStorageSync("search2",this.tag)
				}
				uni.showLoading({
					title:"加载中"
				})
				this.getlist()
				
			},
			//获取列表
			getlist() {
				const that = this;
				this.params.type = this.type
			
				this.imgapi = this.$reqConfig.URLIMAGE
				this.$axios({
					url: "user/public/search",
					method: "post",
					data: this.params
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据						
					if (res.result.pages >= this.params.pageNo) {
						if (this.ifBottomRefresh) {
							this.list = this.list.concat(res.result.list)
						} else {
							this.list = res.result.list
						}
						
					} else {
						this.status = 'noMore'
					}
					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					this.params.pageNo++;
			
				})
				uni.hideLoading()
			},
		},
	}
</script>

<style lang='scss' scoped>
	
	/deep/.button-item {
		background-color: #3cc51f;
		padding: 15rpx 28rpx;
		color: #fff;
		font-size: 23rpx;
		border-radius: 100rpx;
	}

	/deep/.uni-tag--default {
		font-size: 12px;
		margin-right: 15rpx;
		margin-bottom: 14rpx;
		background: #ff;
		display: inline-block;
		border: none;
	}

	.box {
		.content {
			padding: 20rpx;

			.tit {
				font-size: 26rpx;
				margin-bottom: 20rpx;
				font-weight: bold;
			}
			.history {
				
				.clearTit {
					text-align: center;
					font-size: 24rpx;
					color: #999;
					padding: 20rpx 0;
					cursor: pointer;
				}
			}
			.listContent{
				
				.whiteCard{
					min-height: 140rpx;
					margin-bottom: 20rpx;
					position: relative;
					
					.mark{
						background: red;
						  color: white;
						  width: 120rpx;
						  height: 35rpx;
						  font-size: 26rpx;
						  display: flex;
						  align-items: flex-end;
						  justify-content: center;
						  line-height: 35rpx;
						  text-align: center;
						  position: absolute;
						  top: 10rpx;
						  right: -30rpx;
						  transform: rotate(45deg);
					}
					
					.image{
						width: 140rpx;
						height: 140rpx;
						border-radius: 15rpx;
						overflow: hidden;
						position: absolute;
						border: 2rpx solid #eee;
						
						image{
							width: 100%;
							height: 100%;
						}
						text{
							display: inline-block;
							color: #FFFFFE;
							background-color: #86cc14;
							position: absolute;
							top: -2px;
							left: 0px;
							font-size: 25rpx;
							padding: 0rpx 10rpx;
						}
					}
					.right{
						margin-left: 160rpx;
						
						.title{
							font-weight: bold;
						}
						.sale{
							color: #999999;
							font-size: 24rpx;
						}
						.tag{
							margin: 8rpx 0;
						}
						.center{
							margin: 10rpx 0;
						}
						.address{
							font-size: 26rpx;
						}
						.leftPrice{
							color: #ff7800;
							font-weight: bold;
							font-size: 32rpx;
							white-space: nowrap;
								
							text{
								color: #b4b4b4;
								transform: scale(.8);
								display: inline-block;
								font-size: 30rpx;
								margin-right: -15rpx;
								text-decoration: line-through;
							}
						}
					}
					
				}
			}

			
		}
	}
</style>
